<template>
	<view class="login">
		<u--form labelPosition="left" labelWidth="70" :model="form" :rules="rules" errorType="border-bottom" ref="uForm"
			:labelStyle="{color:'#FFFFFF'}">
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input v-model="form.password" border="none" password placeholder="请输入密码" color="#FFFFFF"></u--input>
			</u-form-item>
			<u-form-item label="确认密码" prop="repassword" borderBottom>
				<u--input v-model="form.repassword " border="none" password placeholder="请再次确认密码" color="#FFFFFF">
				</u--input>
			</u-form-item>
		</u--form>
		<view class="submit">
			<u-button :loading="loading" color="#D6D6D6" shape="circle" @click="submit">确认修改</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		mixins: [mixin],
		data() {
			return {
				loading: false,
				tips: '',
				form: {
					password: '', //密码
					repassword: '',
				},
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					repassword: [{
							required: true,
							message: '请再次输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (value === this.form.password) {
									return true
								} else {
									return false
								}
							},
							message: '两次密码不相同',
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		onReady() {

		},
		onLoad(e) {

		},
		computed: {
			...mapState(['userInfo', 'token'])
		},
		methods: {

			submit() {
				this.$refs.uForm.validate().then(res => {
					this.setPassword()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			//重置密码
			async setPassword() {
				this.loading = true
				let data = await this.$http({
					url: this.$api.setPassword,
					method: 'POST',
					hideLoading: true,
					data: this.form
				})
				console.log('[重置密码]', data)
				this.loading = false
				if (data.code == 200) {
					this.$store.commit('ChangeUserInfo', {});
					this.$store.commit('ChangeToken', '');
					uni.$u.toast(data.msg);
					setTimeout(() => {
						this.back()
					}, 1500)
				} else {
					uni.showToast({
						title: data.msg || '重置密码失败',
						icon: 'none',
						duration: 2000
					})
				}
			},

			back() {
				uni.redirectTo({
					url: '/pages/Login/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		min-height: 100vh;
		padding: 112rpx 30rpx;
		box-sizing: border-box;
		background-color: $nft-bg-color;

		.header {
			.title {
				font-size: 48rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 68rpx;
				letter-spacing: 2rpx;
			}

			.des {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;
				letter-spacing: 1rpx;
				margin-bottom: 46rpx;
			}
		}

		::v-deep .u-form-item__body {
			padding: 30rpx 0;
		}

		.submit {
			margin-top: 60rpx;

			::v-deep button {
				color: #333333 !important;
			}
		}

		.code {
			::v-deep button {
				width: 220rpx;
				height: 70rpx;
				background: #F1E1BF;
				border-radius: 35rpx;
				border: 0;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				letter-spacing: 1px;
			}
		}

		.other {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24rpx;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #AAACAC;
				line-height: 42rpx;
				letter-spacing: 1rpx;
			}
		}
	}
</style>
